﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Complex Objects and DTO Example</title>
  <link href="default.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="json2.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#Save").click(function() {
        // Initialize the object, before adding data to it.
        //  { } is declarative shorthand for new Object().
        var NewPerson = { };

        // Iterate over all the text fields and build an 
        //  object with their values as named properties.
        $('input[type=text]').each(function() {
          // Ex: Person['FirstName'] = $('#FirstName').val();
          NewPerson[this.id] = this.value;
        });

        // Create a data transfer object (DTO) with the
        //  proper structure.
        var DTO = { 'NewPerson' : NewPerson };

        $.ajax({
          contentType: "application/json; charset=utf-8",
          data: JSON.stringify(DTO),
          dataType: "json",
          type: "POST",
          url: "Service.svc/DoWork"
        });
      });
    });
  </script>
</head>
<body>
  <fieldset>
    <label for="FirstName">First Name:</label>
    <input type="text" id="FirstName" />
    
    <label for="LastName">Last Name:</label>
    <input type="text" id="LastName" />
    
    <label for="Address">Address:</label>
    <input type="text" id="Address" />
    
    <label for="City">City:</label>
    <input type="text" id="City" />
    
    <label for="State">State:</label>
    <input type="text" id="State" />
    
    <label for="Zip">Zip:</label>
    <input type="text" id="Zip" />
    
    <input type="button" id="Save" value="Save" />
  </fieldset>
</body>
</html>
